<template>
	<view >
		<head-nav
			bgColor="rgba(0,0,0,0)" 
			:leftSlot="true"
			:centerSlot="true"
		>
		</head-nav>
		<view class="head-bg h-576">
			<u--image
				:showLoading="true" 
				:src="getImg('my-bg')"
				width="100%" 
				height="424rpx" 
			></u--image>
		</view>	
		<view class="content padlr20">
			<view class="user-info  flex-a">
				<u-avatar :src="userInfo.memberImage" size="128rpx"></u-avatar>
				<view class="info-r pad-l20 flex ju-bt">
					<view class="">
						<view class="info-name">
							{{ userInfo.memberName ||"" }}
						</view>
						<view class="info-name f-s28 mar-t20">
							{{ userInfo.memberPhone || "" }}
						</view>
					</view>
					<view class="head-operate flex">
						<view class="" @click="$goRouter('/pages/my/pages/editInfo')" >
							<u--image
								:showLoading="true" 
								:src="getImg('edit-b-icon')"
								width="48rpx" 
								height="48rpx" 
							></u--image>
						</view>
						<view class="mar-l24" @click="$goRouter('/pages/my/pages/set')">
							<u--image
								:showLoading="true" 
								:src="getImg('set-icon')"
								width="48rpx" 
								height="48rpx" 
							></u--image>
						</view>
					</view>
				</view>
			</view>
			<view class="vip-card h-202 padtb32 padlr40 mar-t40">
				<view class="vip-bg">
					<u--image
						:showLoading="true" 
						:src="getImg('vip-bg')"
						width="100%" 
						height="202rpx"
					></u--image>
				</view>
				<view class="vip-card-info pos-rel flex-a ju-bt">
					<view class="card-l">
						<view class="card-tit">
							普通会员
						</view>
						<view class="slider-outer bor-r14 mar-t32">
							<view class="slider-on bor-r14 h-12" :style="{width: `${60}%`}">
							</view>
						</view>
						<view class="card-growth mar-t16">
							成长值264/1000
						</view>
					</view>
					<view class="card-btn flex-center" @click="$goRouter('/pages/my/pages/vipGrade')">
						查看成长等级
					</view>
				</view>
			</view>
			<view class="grid-box flex ju-bt padtb20 padlr78 mar-t20">
				<view 
					class="grid-li flex-col flex-a"
					v-for="(item, index) in gridList"
					:key="index"
					@click="goRouter(item)"
				>
					<u--image
						:showLoading="true" 
						:src="getImg(item.icon)"
						width="80rpx" 
						height="80rpx"
					></u--image>
					<view class="grid-label ">
						{{ item.label }}
					</view>
				</view>
			</view>
			<view class="cell-box pad-l30 padtb10 mar-t20">
				<u-cell-group :border="false">
					<u-cell
						v-for="(item, index) in cellList"
						:key="index"
						:border="false"
						@click="goRouter(item)"
					>
						<view class="cell-label " slot="title">
							{{ item.label }}
						</view>
						<u--image
							:showLoading="true" 
							:src="getImg(item.icon)"
							width="42rpx" 
							height="43rpx"
							mode="fit"
							slot="icon"
						></u--image>
						<u--image
							:showLoading="true" 
							:src="getImg('arrow-right')"
							width="12rpx" 
							height="20rpx"
							mode="fit"
							slot="right-icon"
						></u--image>
					</u-cell>
				</u-cell-group>
			</view>
		</view>
	</view>
</template>

<script>
	import { getInfo } from "@/apis/my"
	export default {
		data() {
			return {
				gridList: [
					{
						label: "我的权益",
						icon: "equity-icon",
						path: "/pages/my/pages/myInterest"
					},
					{
						label: "服务记录",
						icon: "record-icon",
						path: "/pages/my/pages/serviceRecord"
					},
					{
						label: "我的预约",
						icon: "subscribe-icon",
						path: "/pages/my/pages/mySubscribe",
					},
				],
				cellList: [
					{
						icon: "record2-icon",
						label: "我的档案",
						path: "/pages/my/pages/myFile"
					},
					{
						icon: "order-icon2",
						label: "我的订单",
						path: "/pages/my/pages/orderList"
					},
					{
						icon: "wallet-icon2",
						label: "我的钱包",
						path: "/pages/my/pages/mywallet"
					},
					{
						icon: "coupon-icon",
						label: "优惠券",
						tips: "领券享优惠",
						path: "/pages/my/pages/myCoupon"
					},
					{
						icon: "integral-icon",
						label: "我的积分",
						path: "/pages/my/pages/inviteIntegral"
					},
					{
						icon: "share-icon",
						label: "邀客",
						path: "/pages/my/pages/inviteGuests"
					},
				],
				sliderVal: 80,
				userInfo: {},
			}
		},
		onLoad() {
			this.getInfo();
		},
		methods: {
			getInfo() {
				getInfo().then(res => {
					this.userInfo = res.data;
				})
			},
			onLogin() {
				this.$goRouter('/pages/login/login')
			},
			goRouter(item) {
				uni.navigateTo({
					url: item.path
				})
			},
			onOperate(type) {
				let arr = [
					{
						path: "/pages/my/pages/editInfo/editInfo"
					},
					{
						path: "/pages/my/pages/qrCode/qrCode"
					}
				]
				this.goRouter(arr[type]);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		position: relative;
		.vip-card {
			position: relative;
			.vip-bg {
				width: 100%;
				position: absolute;
				left: 0;
				top: 0;
			}
			.vip-card-info {
				.card-btn {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #16222F;
					width: 224rpx;
					height: 64rpx;
					background: #FFDBB5;
					border-radius: 50rpx;
				}
				.card-l {
					.card-tit {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 32rpx;
						color: #FFFFFF;
					}
					.slider-outer {
						width: 272rpx;
						height: 12rpx;
						background: rgba(255,255,255,0.4);
						.slider-on {
							background: #FEE8C7;
						}
					}
					.card-growth {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #FFFFFF;
					}
				}
			}
		}
		.cell-box {
			background: #FFFFFF;
			border-radius: 19rpx;
			.cell-label {
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
			}
			/deep/ .u-cell__body {
				 padding: 40rpx 20rpx 20rpx 0!important;
			}
			/deep/ .u-cell-group__wrapper .u-cell:last-child .u-cell__body {
				padding-bottom: 40rpx !important;
			}
		}
		.grid-box {
			background: #FFFFFF;
			border-radius: 19rpx;
			.grid-label {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #111111;
			}
		}
		.user-info {
			.info-r {
				width: calc(100% - 128rpx);
				.info-name {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 36rpx;
					color: #000000;
				}
			}
		}
	}
	.head-bg {
		// background: url("../../static/imgs/my-bg.png") no-repeat;
		// background-size: 100% 100%;
		height: 424rpx;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}
</style>
